<template>
	<!-- 创作文章 -->
	<view class="poem" >
		<form @submit.stop="formSubmit" @reset="">
			<input type="text" hidden name="novid" :value="novid"  maxlength="-1"/>
			<input type="text" hidden name="body" :value="JSON.stringify(list) "  maxlength="-1"/>
			<view class="p-title">
				<view class="title-tip">顺序输入</view>
				<input type="text" name="order" :value=" order" placeholder="请输入顺序" class="cirname" maxlength="20"/>
			</view>
			<view class="p-title">
				<view class="title-tip">章节名称</view>
				<input type="text" name="title" :value="title" placeholder="来个标题好吗" class="cirname" maxlength="15"/>
			</view>
			<!-- <view class="intro">
				<view class="cir-desc">文章简介</view>
				<textarea placeholder="请输入段落内容~" class="cir-textarea" cols="30" rows="30" maxlength="120"  name="intro"  v-model="val">
				</textarea>
				<view class="count">
					<p :class="{'remnant':remnant!=0,'zero':remnant==120}">{{remnant}}</p>
					<view class="">/120</view>
				</view>
			</view> -->
			<view class="show-area" v-for="(item,index) in list" :key="index">
				<!-- 展示文本段落 -->
				<view class="poem-paragraph" v-if="item.type == 'text'">
					<view class="cir-desc">第{{index+1}}段</view>
					<textarea placeholder="请输入内容~" class="cir-textarea" cols="30" rows="30" maxlength="120"  :name="'artPara' + index"  v-model="item.data"></textarea>
					<!-- <view class="count">
						<p :class="{'remnant':paragraph(item.data)!=0,'zero':paragraph(item.data)==120}">{{paragraph(item.data)}}</p>
						<view class="">/120</view>
					</view> -->
				</view>
			</view>
			<view @click="asrStart">语音识别</view>
				<view>{{arsRes}}</view>
				
				<!-- 语音识别 -->
				<wechat-asr ref="weixinAsr" @callback="asrResult"/>
			<view class="paragraph" @tap="addcontent">添加段落</view>
			<button class="report" form-type="submit">创建</button>
		</form>
	</view>
	<!-- 创作文章 -->
</template>

<script>
	import api from '../../../../common/api.js'
	import graceChecker from '../../../../common/graceChecker.js'
	import WechatAsr  from '../../../../components/content/wechatASR.vue'
	
	export default {
		data() {
			return {
				list:[],    //章节body
				novid:'',			//小说id
				repost:1,
				title:"",
				val: "",    //简介字数
				paragcourt:{val:''},//段落内容字数
				chapter_body_order:0,
				arsRes: ''	//翻译后结果
			}
		},
		components:{
			WechatAsr
		},
	// 	computed: {
	// 		remnant(val) {//实时记录输入字数
	// 			return  val.length;
	// 		},
	// 		paragraph(value) {
	// 			console.log(value);
	// 			// this.$set(this.paragcourt,'val',value)
	// 			console.log(this.paragcourt);
	// 			// return this.paragcourt.val.length
	// 		}
	
	// 	},
		async onLoad(p) {
			this.novid = p.nid
		},
		
		methods:{
			// 语音识别
			asrStart () {
				this.$refs.weixinAsr.show();
			},
			asrResult (res) {
				this.arsRes = res;
				this.list.push({
						order:++this.chapter_body_order,
						type:'text',
						data:this.arsRes,
					})
			},
				
			addcontent() {//添加文章段落
				console.log('hhhhhhhhhhhhh');
				this.list.push({
					order:++this.chapter_body_order,
					type:'text',
					data:''
				})
				console.log(this.list);
			},
			
			// 文章修改操作
			async formSubmit(e) {//表单提交
				console.log(e.detail.value);
			
				
				// if(!this.repost) { 
				// 	uni.showToast({ title: '勿重复提交 ', icon: "none" });
				// 	return 
				// }
				var {novid,title,body,order} = e.detail.value
				console.log(novid,title,body,order);
				var jbody = JSON.parse(body)
				console.log(jbody);
				
				var rule = [
					{name:"novid", checkType : "notnull", errorMsg:"小说id不能为空"},
					{name:"order", checkType : "int", errorMsg:"章节序号需为数字"},
					{name:"title", checkType : "notnull", errorMsg:"章节名称不能为空"},
				];
				//进行表单检查
				var checkRes = graceChecker.check(e.detail.value, rule);
				if(!checkRes){
					uni.showToast({ title: graceChecker.error, icon: "none" });
					return 
				}
				if(jbody.length == 0) {
					uni.showToast({ title: '章节内容至少包含一个段落 ', icon: "none" });
					return
				}else {
					for(var obj of jbody) {
						console.log(obj);
						for(var key in obj) {
							if(!obj[key]) {
								console.log('-----------');
								uni.showToast({ title: '文本内容不能为空 ', icon: "none" });
								return
							}
						}
							
					}
				}
				this.repost = 0 
				uni.showLoading({
					title:'提交中'
				});
				
				var res = await api.CreateChapter(novid,order,title,body)
				console.log(res);
				if(res.err == 0)  {
					uni.hideLoading()
					uni.showToast({
						title:res.msg
					})
					setTimeout(() => {
						uni.navigateBack({
							delta:1
						})
					},700)
				}
			},
			
		}
	}
</script>

<style lang="scss">
.poem {
	// margin-top: 110rpx;
	padding: 20rpx 30rpx;
	background-color: #fff;
	.p-title{
		padding: 20rpx 0;
		.title-tip {
			margin: 15rpx 10rpx;
		}
		input {
			border: 2rpx solid #F3F6F5;
			margin: 10rpx 0;
			background: rgba(246,247,249,0.9);
			border-radius: 15rpx;
		  padding: 20rpx 30rpx;
		}
	}
}
.paragraph,.addImg {
	background-color: rgba(226,238,254,.9);
	color: #1472FE;
}
.addImg {
	margin: 70rpx 80rpx 30rpx;
}
.report {
	background-color: #1a77fe;
	color: #fff;
	margin: 30rpx 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 82rpx;
	border-radius: 10rpx;
}
.paragraph,.addImg {
	padding: 15rpx 0;
	border-radius: 10rpx;
	padding: 15rpx 0;
	text-align: center;
	margin: 30rpx  80rpx;
	height: 55rpx;
	line-height: 55rpx;
}
.poem-paragraph {
	margin-top: 40rpx;
}
.paragraph {
	background-color: rgba(226,238,254,.9);
	color: #1472FE;
}
.intro,.poem-paragraph {
	position: relative;
	font-size: 30rpx;
	background-color: #fff;
	.cir-desc {
		margin: 10rpx;
	}
	.cir-textarea {
		border: 2rpx solid #F3F6F5;
		margin: 10rpx 0;
		background: rgba(246,247,249,0.5);
		border-radius: 15rpx;
		line-height: 34rpx;
	}
	.count {
		display: flex;
		position: absolute;
		right: 20rpx;
		bottom: 25rpx;
		color: #999;
		.remnant {
			color: #999;
		}
		.zero{
			color: #FF0000;
		}
	}
	textarea {
		height: 210rpx;
		width: 650rpx;
		padding: 20rpx;
		font-size: 28rpx;
	}
}
.upload-images-area {
	/* width: 750rpx;
	margin: 0 auto;
	height: 1000rpx; */
	display: flex;
	justify-content: center;
	padding: 10rpx 15rpx;
	
	.images-area {	
		display: flex; 
		flex-wrap: wrap;
		// width: 700rpx;
		box-sizing: border-box;
		.image-item {
			position: relative;
			width: 220rpx;
			height: 210rpx;
			margin-right: 10rpx;
			margin-bottom: 10rpx;
			border-radius: 10rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
			.delete-icon {
					position: absolute;
					right: 5rpx;
					top: 5rpx;
					image {
						width: 45rpx;
						height: 45rpx;
						// background: rgba(0,0,0,.2);
					}
				}
			.up-cover-desc {
				position: absolute;
				width: 220rpx;
				text-align: center;
				// left: 0;
				// right: 0;
				// margin: 0 auto;
				color: #FFFFFF;
				background-color:rgba(122,122,122,.8);
				bottom: 0;
				border-bottom-left-radius: 10rpx;  
				border-bottom-right-radius: 10rpx; 
			}
		}
		.upload {
			display: flex;
			position: relative;
			align-items: center;
			justify-content: center;
			width: 220rpx;
			height: 210rpx;
			margin-bottom: 10rpx;
			border-radius: 10rpx;
			border: 1rpx solid #F3F6F5;
			background: rgba(245,245,245,.8);
			.up-cover-desc {
				position: absolute;
				width: 220rpx;
				text-align: center;
				// left: 0;
				// right: 0;
				// margin: 0 auto;
				color: #FFFFFF;
				background-color:rgba(122,122,122,.8);
				bottom: 0;
				border-bottom-left-radius: 10rpx;  
				border-bottom-right-radius: 10rpx; 
			}
			image {
				width: 60%;
				height: 58%;
			}
		}
	}
}
</style>

